<!--课程考核成绩查询-->
<template>
  <div class="paperprint-container">
    <div class="search-container">
      <div class="search-container-left">
        <!--        学期-->
        <div class="search-container-item">
          <span>学期:</span>
          <el-select
            v-model="xueqi"
            style="width: 92px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in jcList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="search-container-item">
          <span>培养层次: </span>
          <el-select
            v-model="level"
            style="width: 121px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in jcList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>修习类型: </span>
          <el-select
            v-model="studytypecode"
            style="width: 138px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in studList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>学 号:</span>
          <el-input
            style="width: 142px"
            size="mini"
            placeholder="请输入课程负责单位"
            v-model="studentid"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>学员姓名:</span>
          <el-input
            style="width: 142px"
            size="mini"
            placeholder="请输入课程负责单位"
            v-model="name"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>学员队</span>
          <el-select
            v-model="classes"
            style="width: 91px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in sqwrList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div
        class="search-container-right"
        style="justify-content: space-between"
      >
        <div class="search-container-left">
          <div class="search-container-item">
            <span>年级: </span>
            <el-select
              v-model="grade"
              style="width: 91px"
              size="mini"
              placeholder="请选择"
            >
              <el-option
                v-for="item in njList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-container-item">
            <span>专业班次: </span>
            <el-select
              v-model="majorclass"
              style="width: 121px"
              size="mini"
              placeholder="请选择"
            >
              <el-option
                v-for="item in zybcList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-container-item">
            <span>课程名称: </span>
            <el-input
              style="width: 138px"
              size="mini"
              placeholder="请输入课程负责单位"
              v-model="prelectcourse"
            ></el-input>
          </div>
          <div class="search-container-item">
            <span>课程编号:</span>
            <el-input
              style="width: 142px"
              size="mini"
              placeholder="请输入课程负责单位"
              v-model="courseno"
            ></el-input>
          </div>
          <div
            class="search-container-item"
            style="margin-top: 4px"
          >
            <span>查看期中不及格人员:</span>
            <el-checkbox
              v-model="qzbjg"
              :disabled="chak"
              @change="ckqz"
            ></el-checkbox>
          </div>
          <div class="search-container-item" style="margin-top: 4px">
            <span>查看总评不及格人员:</span>
            <el-checkbox
              v-model="zpbjg"
              :disabled="chak2"
              @change="ckzp"
            ></el-checkbox>
          </div>
        </div>
        <div class="search-container-right">
          <div class="search-button" @click="Tjkcqueryallscore">
            <img src="../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div>
        </div>
      </div>
    </div>

    <div class="table-container">
      <div class="table-header">
        <div class="item" style="width: 108px">年级</div>
        <div class="item" style="width: 106px">专业班次</div>
        <div class="item" style="width: 115px">课程编号</div>
        <div class="item" style="width: 115px">课程名称</div>
        <div class="item" style="width: 118px">修习类型</div>
        <div class="item" style="width: 109px">学号</div>
        <div class="item" style="width: 116px">姓名</div>
        <div class="item" style="width: 111px">课下作业成绩</div>
        <div class="item" style="width: 114px">课堂测评成绩</div>
        <div class="item" style="width: 114px">期中考试成绩</div>
        <div class="item" style="width: 135px">课终考核成绩</div>
        <div class="item" style="width: 116px">补考成绩</div>
        <div class="item" style="width: 135px">第二次补考成绩</div>
        <div class="item" style="width: 116px">总评成绩</div>
        <div class="item" style="width: 111px">备注</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item" style="width: 108px">{{ item.grade }}</div>
        <div class="item" style="width: 106px">{{ item.majorclass }}</div>
        <div class="item" style="width: 115px">{{ item.courseno }}</div>
        <div class="item" style="width: 115px">{{ item.prelectcourse }}</div>
        <div class="item" style="width: 118px">{{ item.studytypecode }}</div>
        <div class="item" style="width: 109px">{{ item.studentid }}</div>
        <div class="item" style="width: 116px">{{ item.name }}</div>
        <div class="item" style="width: 111px">{{ item.checkusualscore }}</div>
        <div class="item" style="width: 115px">
          {{ item.checkexperimentscore }}
        </div>
        <div class="item" style="width: 114px">
          {{ item.checkmidtermscore }}
        </div>
        <div class="item" style="width: 137px">
          {{ item.issue }}
        </div>
        <div class="item" style="width: 115px">{{ item.bkscore }}</div>
        <div class="item" style="width: 135px">{{ item.onemorescore }}</div>
        <div class="item" style="width: 116px">{{ item.scorenumber }}</div>
        <div class="item" style="width: 135px">{{ item.comments }}</div>
      </div>
    </div>
    <!-- 导出Excel -->
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          name="课程考试成绩.xls"
          style="color: #f3b815"
        >
          &ensp;导出Excel
        </download-excel>
      </div>
      <div class="text">授课教员名字后加“*”为课程负责人</div>
    </div>
  </div>
</template>


<script>
import { queryallscorejk, Tjkcqueryallscorejk } from "@/api/admin1/check";
export default {
  data() {
    return {
      chak: false,
      chak2: false,
      jsonFields: {
        年级: "grade",
        专业班次: "majorclass",
        课程编号: "courseno",
        课程名称: "prelectcourse",
        修习类型: "studytypecode",
        学号: "studentid",
        姓名: "name",
        课下作业成绩: "checkusualscore",
        课堂测评成绩: "checkexperimentscore",
        期中考试成绩: "checkmidtermscore",
        课终考核成绩: "issue" + "%",
        补考成绩: "bkscore",
        第二次补考成绩: "onemorescore",
        总评成绩: "scorenumber",
        备注: "comments",
      },
      //审批进度
      checked: false,
      checkeda: false,
      showAddMessageRemark: false,
      showBackDialog: false,
      state: "1",
      course: "",

      xueqi: "",
      level: "",
      name: "",
      studentid: "",
      prelectcourse: "",
      grade: "",
      studytypecode: "",
      nj: "",
      jcList: [
        {
          value: "2021级",
          label: "2021级",
        },
        {
          value: "2022级",
          label: "2022级",
        },
      ],
      njList: [
        {
          value: "2021级",
          label: "2021级",
        },
        {
          value: "2022级",
          label: "2022级",
        },
      ],
      levelList: [
        {
          value: "专科",
          label: "专科",
        },
        {
          value: "本科",
          label: "本科",
        },
      ],
      studytypecodeList: [
        {
          value: "必修",
          label: "必修",
        },
        {
          value: "选修",
          label: "选修",
        },
      ],
      //专业班次
      majorclass: "",
      zybcList: [
        {
          value: "专业班次2",
          label: "专业班次2",
        },
        {
          value: "专业班次1",
          label: "专业班次1",
        },
        {
          value: "",
          label: "",
        },
      ],
      grade: "",
      njList: [
        {
          value: "27",
          label: "27",
        },
        {
          value: "26",
          label: "26",
        },
        {
          value: "本科",
          label: "本科",
        },
        {
          value: "专科",
          label: "专科",
        },
      ],

      tableData: [
        {
          grade: "",
          classes: "",
          majorclass: "",
          courseno: "",
          prelectcourse: "",
          studytypecode: "",
          studentid: "",
          name: "",
          scorenumber: "",
          checkusualscore: "",
          checkexperimentscore: "",
          checkmidtermscore: "",
          oldmakeupscore: "",
          oldmakeupscore2: "",
          issue: "",
          comments: "",
        },
      ],
    };
  },
  mounted() {
    this.kcqueryallscore();
  },
  methods: {
    //课程考核成绩查询
    kcqueryallscore() {
      let obj = {
        xueqi: "2020春",
        classes: "",
        courseno: "",
        prelectcourse: "",
        studytypecode: "",
        studentid: "",
        name: "",
        grade: "",
      };
      return new Promise(() => {
        queryallscorejk(obj).then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
          }
        });
      });
    },

    //按条件查询
    Tjkcqueryallscore() {
      let obj = {
        xueqi: this.xueqi,
        level: this.level,
        studytypecode: this.studytypecode,
        studentid: this.studentid,
        name: this.name,
        grade: this.nj,
        majorclass: this.majorclass,
        prelectcourse: this.prelectcourse,
      };
      return new Promise(() => {
        Tjkcqueryallscorejk(obj).then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
          }
        });
      });
    },
    ckqz() {
      this.chak2 = !this.chak2;
      let obj = {
        xueqi: "2020春",
        qzbjg: this.qzbjg,
      };
      return new Promise(() => {
        Tjkcqueryallscorejk(obj).then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
          }
        });
      });
    },
    ckzp() {
      this.chak = !this.chak;
      let obj = {
        xueqi: "2020春",
        zpbjg: this.zpbjg,
      };
      return new Promise(() => {
        Tjkcqueryallscorejk(obj).then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
          }
        });
      });
    },
    auditStatus() {
      this.state = 2;
    },
    RouterTo() {
      this.$router.push("/admin/planManagement/editPlanManage");
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 90px;
}

.back-textas {
  margin-top: 33px;

  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }
  }
}
.item_btn {
  width: 55px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.manual-entry-container {
  .el-dialog__body {
    > div {
      width: 1014px;
      border: 1px solid rgba(0, 76, 167, 0.8);
      border-radius: 6px;
      margin: 0 auto;
      > div {
        border-bottom: 1px solid rgba(0, 76, 167, 0.39);
        &:last-child {
          border-bottom: none;
        }
        > div {
          display: flex;
          > div {
            height: 96px;
            display: flex;
            align-items: center;
            justify-content: center;
            &:nth-child(1) {
              width: 80%;

              text-align: center;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
            }
            &:nth-child(1) {
              height: 200px;
            }
          }
        }
      }
    }
  }
  .el-dialog__footer {
    padding-bottom: 43px;
  }
  .dialog-footer {
    > button {
      width: 91px;
      height: 36px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 6px;
      background: rgba(255, 246, 239, 1);
      font-size: 18px;
      color: #f3b815;
    }
  }
}
.assessment-container {
  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;
      .el-radio {
        margin-right: 79px;
      }
    }
    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }
  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;
      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }
        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }
        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;
          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;
            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }
          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }
    .el-dialog__footer {
      padding-bottom: 76px;
      .green {
        padding: 1px 17px;
      }
    }
  }
}
.plan-entry-table-container {
  margin-top: 30px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }
  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }
  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }
  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .lucj-import-button {
    .export-button;
    width: 116px;
    margin: 0 auto 12px;
    background: #f1fff8;
    border: 1px solid #02c86c;
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #02c86c;
    }
  }
  .lucj-expot-button {
    .export-button;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 81px;
    margin: 0 auto 12px;
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #f3b815;
    }
  }
}
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.paperprint-container {
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;

      .el-radio {
        margin-right: 79px;
      }
    }

    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }

  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;

      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }

        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }

        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;

          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;

            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }

          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 76px;

      .green {
        padding: 1px 17px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/paper-printsage.less";

.el-dialog__wrapper { ::v-deep .el-dialog {overflow: auto;height: 439px;}}
.paperprint-container
  .search-container
  .search-container-item[data-v-ed20e56c] {
  color: #004ca7;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  margin-right: 80px;
}
.plan-entry-table-container {
  margin-top: 15px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
</style>
